<template>
  <div style="border:2px solid red">
    这里是三级级路由页面
    userId: {{userid}}
  </div>
</template>

<script>

export default {
  data() {
    return {
      userid:'',
    }
  },
  //生命钩子函数：有一个钩子，钩住浏览器的某一个位置，等浏览器达到那个状态，就自动执行！
  created() {
//当浏览器打开这个页面创建vue完成的时候，就会执行这段代码！不需要我们手动去触发这个函数。
    console.log(this.$route);
    console.log(this.$router);

    this.userid = this.$route.query.userid
    console.log(this.userid);
  },
  watch:{
    $route(to,from){
      console.log(to);
      console.log(from);
      this.userid = to.query.userid;
    }
  }
}
</script>
